<template>
  <div class="com-container">
    <div class="com-chart" ref="Hot"></div>
    <span class="iconfont arr-left" @click="toLeft" :style="comStyle">&#xe6ef;</span>
    <span class="iconfont arr-right" @click="toRight" :style="comStyle">&#xe6ed;</span>
    <span class="cat-name" :style="comStyle">{{ catName }}</span>
    <!-- :style="comStyle" -->
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getThemeValue } from '@/utils/theme_utils'
export default {
  data() {
    return {
      allData: null,//服务器返回的数据
      currentIindex: 0,//当前一级分类数据
      titleFontSize: 0,//定义全局的字体大小样式
    };
  },
  destroyed() {
    //销毁监听事件以防止内存泄漏
    window.removeEventListener('resize', this.resizeEcharts)
  },
  //vue写方法的钩子
  methods: {
    //初始化echartsInstance对象
    initChart() {
      this.chartInit = this.$echarts.init(this.$refs.Hot, this.theme);
      //初始化option
      const initOption = {
        title: {
          text: '| 热销商品占比',
          left: 10,
          top: 15
        },
        legend: {
          top: '15%',
          icon: 'circle'
        },
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: params => {
            let sum = 0;//拿到三级标签的总和
            params.data.children.forEach(item => {
              sum += item.value
            });
            let strMoudle = ""
            params.data.children.forEach(item => {
              strMoudle += `
                ${item.name}:${((item.value / sum) * 100).toFixed(1) + '%'}
                <br/>
              `
            })


            return strMoudle
          }
        },
        series: [
          {
            type: 'pie',
            label: {//隐藏文字
              show: false
            },
            labelLine: {//隐藏线条
              show: false
            },
            emphasis: {
              lable: {
                show: true
              },

            },

          }
        ]

      }
      this.chartInit.setOption(initOption)
    },
    //获取服务器数据
    async getData() {
      const { data: ret } = await this.$http.get('hotproduct');
      this.allData = ret
      console.log(ret)
      this.updataChart();
    },
    //更新图表
    updataChart() {
      const pieData = this.allData[this.currentIindex].children.map(item => {
        return {
          name: item.name,
          value: item.value,
          children: item.children
        }
      })
      //图例数据
      const legendData = pieData.map(item => {
        return item.name
      })
      console.log(legendData)
      //添加了数据的option
      const dataOption = {
        legend: {
          //图例设计
          data: legendData
        },
        series: [
          {
            data: pieData
          }
        ],
      }
      this.chartInit.setOption(dataOption)
    },
    //动态适配电脑的分辨率
    resizeEcharts() {
      this.titleFontSize = this.$refs.Hot.offsetWidth / 100 * 3.6
      const resizeOption = {
        title: {
          textStyle: {
            fontSize: this.titleFontSize
          },
          series: [
            {
              radius: this.titleFontSize * 4.5,
              center: ['50%', '50%']
            }
          ],
          legend:{
            itemWidth:this.titleFontSize / 2,
            itemHeight:this.titleFontSize / 2,
            itemGap:this.titleFontSize/2,
            textStyle:{
              fontSize:this.titleFontSize/2
            }
          }
        },
        series: [
          {
            //控制圆盘大小
            radius: this.titleFontSize * 4.5,
          }
        ]
      }
      this.chartInit.setOption(resizeOption)
      this.chartInit.resize()
    },
    //两个点击按钮
    toLeft() {
      this.currentIindex--;
      if (this.currentIindex < 0) {
        this.currentIindex = this.allData.length - 1
      }
      this.updataChart();
    },
    toRight() {
      this.currentIindex++;
      if (this.currentIindex > this.allData.length - 1) {
        this.currentIindex = 0;
      }
      this.updataChart();
    }

  },
  mounted() {
    this.initChart();
    this.getData(),
      //监听window窗口的大小变化
      window.addEventListener('resize', this.resizeEcharts)
    this.resizeEcharts()
  },
  //计算属性
  computed: {
    ...mapState(['theme']),
    catName() {
      if (!this.allData) {
        return ''
      } else {
        return this.allData[this.currentIindex].name
      }
    },
    comStyle(){
      return{
        fontSize:this.titleFontSize+'px',
        color: getThemeValue(this.theme).titleColor

      }
    }
  },
   watch: {
    theme() {
      this.chartInit.dispose()
      this.initChart()
      this.resizeEcharts()
      this.updataChart()
    }
  },
};
</script>

<style lang="less">
#app .arr-left {
  position: absolute;
  left: 10%;
  top: 50%;
  transform: rotate(0deg);
  transform: translateY(-50%);
  cursor: pointer;
  color: white;
}

#app .arr-right {
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  transform: rotate(0deg);
  cursor: pointer;
  color: white;
}

.cat-name {
  position: absolute;
  left: 80%;
  bottom: 20px;
  color: white;
}
</style>